<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>好看的门户首页</title>
    <style>
      /* Variables */
      *,
      *::after,
      *::before {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }

      body {
        background: #ffffff;
        font-family: 'PT Sans', sans-serif;
        line-height: 1.3;
      }

      button {
        outline: none;
      }

      header {
        width: 100%;
        height: 720px;
        position: relative;
        overflow: hidden;
      }
      header::after {
        background: #f4f6f9;
        z-index: -2;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
      header::before {
        border-radius: 15%;
        content: '';
        position: absolute;
        background: -webkit-gradient(
          linear,
          left top,
          left bottom,
          from(#5442d2),
          to(#5932d0)
        );
        background: linear-gradient(#5442d2, #5932d0);
        width: 65%;
        right: 0;
        top: 0;
        padding-top: 93%;
        -webkit-transform: rotate(304deg);
        transform: rotate(304deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        z-index: -1;
      }
      header .nav {
        font-family: 'Josefin Sans', sans-serif;
        font-weight: 600;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        -webkit-box-align: center;
        align-items: center;
        padding: 0 4%;
        -webkit-box-pack: justify;
        justify-content: space-between;
        z-index: 2;
      }
      header .nav a {
        color: #fff;
        font-size: 13px;
        text-decoration: none;
        display: inline-block;
        padding: 15px 15px;
      }
      header .nav a.btn-nav {
        background: #5e45d3;
        border-radius: 8px;
      }
      header .nav .logo {
        height: 90px;
        width: 75px;
      }
      header .nav .logo img {
        width: 100%;
      }
      header .header-container {
        padding: 10% 12%;
      }
      header .header-container .small {
        color: #555;
        font-family: 'Josefin Sans', sans-serif;
        text-transform: uppercase;
        font-size: 14px;
      }
      header .header-container .large {
        width: 500px;
        font-size: 2rem;
        color: #3f3b41;
      }
      header .header-container .large span {
        font-weight: bold;
        color: #373339;
      }
      header .header-container form {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
      }
      header .header-container form input {
        width: 500px;
        padding: 20px 15px;
        border-radius: 45px;
        border: none;
        outline: none;
        font-family: 'PT Sans', sans-serif;
        font-size: 16px;
        text-indent: 15px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
      }
      header .header-container form button {
        width: 50px;
        height: 50px;
        border: none;
        background: -webkit-gradient(
          linear,
          left top,
          left bottom,
          from(#ff8e59),
          to(#ffb153)
        );
        background: linear-gradient(#ff8e59, #ffb153);
        border-radius: 100%;
        margin-left: -57px;
        box-shadow: 0 8px 15px #ffb253c7;
        cursor: pointer;
      }
      header .header-container form button svg {
        width: 20px;
        fill: #fff;
        margin: auto;
        margin-top: 4px;
      }

      main {
        margin-top: -130px;
      }
      main .main-container {
        padding: 0 12%;
        margin-bottom: 35px;
      }
      main .main-container .small {
        color: #555;
        font-family: 'Josefin Sans', sans-serif;
        text-transform: uppercase;
        font-size: 14px;
      }
      main .main-container .cards {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
      }
      main .main-container .cards .card {
        cursor: pointer;
        border-radius: 5px;
        width: 24%;
        background: #ffffff;
        color: #959499;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        font-weight: bold;
      }
      main .main-container .cards .card .card-content {
        padding: 15px;
      }
      main .main-container .cards .card .card-footer {
        background: #faf9fe;
        padding: 15px;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        justify-content: space-between;
      }
      main .main-container .cards .card .card-footer .text p.price {
        color: #5b2ed0;
        font-size: 1.4rem;
        margin-bottom: 5px;
      }
      main .main-container .cards .card .card-footer .button button {
        border: 2px solid #e9e5fa;
        cursor: pointer;
        background: transparent;
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      main .main-container .cards .card .card-footer .button button img {
        max-width: 100%;
      }
      main .main-container .cards .card p.dark {
        color: #3c3c3f;
      }
      main .main-container .cards .card .img {
        padding: 0 15px;
        height: 161px;
        border-bottom: 1px solid #ebeaeb;
        text-align: center;
        position: relative;
      }
      main .main-container .cards .card .img img {
        vertical-align: text-top;
        width: 80%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="nav">
        <a href="#" class="logo">
          <img src="https://image.ibb.co/bO1DcG/logo.png" alt="logo" />
        </a>
        <nav>
          <a href="#">HOME</a>
          <a href="#">ABOUT US</a>
          <a href="#">BLOG</a>
          <a href="#">HOW IT WORKS?</a>
          <a href="#">LOG IN</a>
          <a href="#" class="btn-nav">SIGN UP</a>
        </nav>
      </div>

      <div class="header-container">
        <p class="small">Innovative Solution For Sourcing Candidates</p>
        <p class="large">
          Help us find <span>the missing puzzle, get rewarded</span> properly.
        </p>

        <form action="">
          <input
            type="text"
            name="keyword"
            id=""
            placeholder="Keyword, job title or company"
          />
          <button type="submit">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              version="1.1"
              id="Capa_1"
              x="0px"
              y="0px"
              viewBox="0 0 483.083 483.083"
              xml:space="preserve"
            >
              <g>
                <g>
                  <path
                    d="M332.74,315.35c30.883-33.433,50.15-78.2,50.15-127.5C382.89,84.433,298.74,0,195.04,0S7.19,84.433,7.19,187.85    S91.34,375.7,195.04,375.7c42.217,0,81.033-13.883,112.483-37.4l139.683,139.683c3.4,3.4,7.65,5.1,11.9,5.1s8.783-1.7,11.9-5.1    c6.517-6.517,6.517-17.283,0-24.083L332.74,315.35z M41.19,187.85C41.19,103.133,110.04,34,195.04,34    c84.717,0,153.85,68.85,153.85,153.85S280.04,341.7,195.04,341.7S41.19,272.567,41.19,187.85z"
                  />
                </g>
              </g>
            </svg>
          </button>
        </form>
      </div>
    </header>
    <main>
      <div class="main-container">
        <p class="small">Recently Added Jobs</p>
        <div class="cards">
          <div class="card">
            <div class="card-content">
              <div class="img">
                <img
                  src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e4/Herm%C3%A8s.svg/1280px-Herm%C3%A8s.svg.png"
                  alt=""
                  srcset=""
                />
              </div>
              <div class="desc">
                <p class="dark">Art Director</p>
                <p>Hermes International</p>
              </div>
            </div>
            <div class="card-footer">
              <div class="text">
                <p class="price">$1,240</p>
                <p>of hiring reward</p>
              </div>
              <div class="button">
                <button>
                  <img src="https://image.ibb.co/bO1DcG/logo.png" alt="" />
                </button>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-content">
              <div class="img">
                <img
                  src="https://diylogodesigns.com/blog/wp-content/uploads/2016/04/Coca-Cola-Logo-PNG.png"
                  alt=""
                  srcset=""
                />
              </div>
              <div class="desc">
                <p class="dark">HR Head of Operation</p>
                <p>The Coca Cola Company</p>
              </div>
            </div>
            <div class="card-footer">
              <div class="text">
                <p class="price">$1,980</p>
                <p>of hiring reward</p>
              </div>
              <div class="button">
                <button>
                  <img src="https://image.ibb.co/bO1DcG/logo.png" alt="" />
                </button>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-content">
              <div class="img">
                <img
                  src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Dropbox_logo_(2013).svg/2000px-Dropbox_logo_(2013).svg.png"
                  alt=""
                  srcset=""
                />
              </div>
              <div class="desc">
                <p class="dark">Bussiness Strategy Associate</p>
                <p>Dropbox Inc.</p>
              </div>
            </div>
            <div class="card-footer">
              <div class="text">
                <p class="price">$3,100</p>
                <p>of hiring reward</p>
              </div>
              <div class="button">
                <button>
                  <img src="https://image.ibb.co/bO1DcG/logo.png" alt="" />
                </button>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-content">
              <div class="img">
                <img
                  src="https://diylogodesigns.com/blog/wp-content/uploads/2016/04/Mcdonalds-logo-icon-png-free.png"
                  alt=""
                  srcset=""
                />
              </div>
              <div class="desc">
                <p class="dark">Financial Analyst</p>
                <p>McDonald's Corporation</p>
              </div>
            </div>
            <div class="card-footer">
              <div class="text">
                <p class="price">$2,640</p>
                <p>of hiring reward</p>
              </div>
              <div class="button">
                <button>
                  <img src="https://image.ibb.co/bO1DcG/logo.png" alt="" />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
  <script>
    // Tried to redesign https://dribbble.com/shots/3721946-

    let form = document.getElementsByTagName('form')[0];

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      return false;
    });
  </script>
</html>
